Vercel 发布新产品 v0:基于AI的生成式用户界面系统
今天在 Twitter 上看到 Guillermo Rauch(Vercel CEO) 发布的一则消息:
Excited to introduce v0.dev to the world. Check out some of the examples we built, like a pricing component built in 22 chat-like instructions.
v0 发布后在圈子里引起了不小的轰动,推友@op7418表示很惊讶:
基于对 v0 的好奇,通过本文,将从以下几个方面来学习 v0,看看 v0 将会给前端开发、研发流程、研发效率带来哪些改变:
v0 基本介绍 v0 主要特性 v0 生成代码 生成代码在 Next.js 应用中实践
1.v0 基本介绍
v0 是 Vercel Labs 基于人工智能开发的生成式用户界面系统。它基于 Shadcn UI 和 Tailwind CSS 生成复制和粘贴友好的 React 代码,供开发者在自己的项目中使用。
引用 Vercel vp,v0.dev 创建者 @jaredpalmer 描述:
2.v0 主要特性
即时生成:可以根据用户的文本提示即时生成 UI 组件,这为用户提供了快速的实时反馈和迭代能力。 实时修改:通过提供更具体和详细的提示来获得更精确的结果。 简单易用:用户只需提供简单的文本提示(Prompt),无需复杂的设计或编程知识。 组件集成:提供了多种 UI 组件的示例,如音乐播放器、发票表格、浏览器窗口等,这为用户提供了丰富的选择。
引用 Vercel CEO @rauchg的描述:
3.v0 生成代码
访问 https://v0.dev,开始创建带有简单文本提示的用户界面。生成的代码将使用预置组件和流行的 Tailwind CSS 库来设计用户界面。
您可以继续重新提示和编辑生成的用户界面,以达到您想要的效果。准备就绪后,您就可以将生成的代码复制、粘贴并发送到您的 Next.js 应用程序中。
4.Next.js 应用实践
我们首先会初始化一个 Next.js 的项目,然后将 v0 生成的代码集成进来并调试。
4.1.初始化 Next.js 项目
# 1.初始化项目
$ npx create-next-app@latest v0-app --typescript --tailwind --eslint
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias? … No / Yes
Creating a new Next.js app in /Users/zuojunjun/Documents/workspaces/github-workspace/blog/fedlab/2023/09/0916/v0-app.
Using npm.
Initializing project with template: app-tw
Installing dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom
- tailwindcss
- postcss
- autoprefixer
- eslint
- eslint-config-next
added 331 packages in 2m
Success! Created v0-app at /Users/fedlab/v0-app
# 2.初始化 shadcn-ui
$ cd v0-app && npx shadcn-ui@latest init
Need to install the following packages:
shadcn-ui@0.3.0
Ok to proceed? (y) y
✔ Would you like to use TypeScript (recommended)? … no / yes
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Slate
✔ Where is your global CSS file? … app/globals.css
✔ Would you like to use CSS variables for colors? … no / yes
✔ Where is your tailwind.config.js located? … tailwind.config.js
✔ Configure the import alias for components: … @/components
✔ Configure the import alias for utils: … @/lib/utils
✔ Are you using React Server Components? … no / yes
✔ Write configuration to components.json. Proceed? … yes
✔ Writing components.json...
✔ Initializing project...
✔ Installing dependencies...
Success! Project initialization completed.
4.2.集成 v0 生成的代码
将生成的代码集成到 Next.js 应用程序中的方式主要有两种:
方式一:通过用户界面
复制代码:点击右上角的 "Code" 按钮,复制完整代码片段。 集成代码:切换到您的 Next.js 项目,然后在需要的地方粘贴组件代码。
方式二:通过 CLI
复制 CLI 命令:点击右上角的 "Code" 按钮,复制 CLI 命令,如 npx v0 add [id]。 在项目中运行命令:在终端中导航到 Next.js 项目的根目录,然后粘贴复制的终端命令。
5.总结
从官网介绍,目前该应用还处于内测阶段,用户需要申请方能使用。期待Vercel后续能够推出更多实用功能,成为界面设计的利器。
随着访问权限的进一步放开,v0 团队应该还会添加许多功能。
个人认为, v0 是一个非常有前景的基于AI的界面生成工具,它简化了设计流程,可以大幅降低界面设计及代码编写成本。
让我们持续关注 v0 的未来发展,期望它能在前端的研效提升、成本优化等方面带来质的飞跃。